<template>
	<view>
		<headTop></headTop>
		<view class="orderAction">
			<button :class="isorder== 1 ? 'catives': '' ">送货订单</button>
			<button>送货历史订单</button>
			<button :class="isorder== 2 ? 'catives': '' ">归还订单</button>
		</view>

		<view class="scroll-view-container">
			<scroll-view :style="{height:wh + 'px'}" scroll-y="true">
				<block v-for="(item,index) in goodsInfo">
					<uni-card class="goodsInfo">

						<view class="goodsDetail">
							<span>{{item.orderDetail}}(订单号)</span>
						</view>
						<view class="detailTime">
							<span>{{item.orderTime}}(创建时间)</span>
							<span>{{item.orderAction}}</span>
						</view>

					</uni-card>
				</block>
			</scroll-view>

			<view class="contain-ten">


				<button class="createdOrder" type="default">创建归还订单</button>

			</view>

		</view>
	</view>
</template>

<script>
	import headTop from "@/components/common/headTop/headTop.vue";
	export default {
		data() {
			return {
				wh: 0,
				isorder: 0,
				goodsInfo: [{
						orderDetail: 23724834,
						orderTime: "2022-12-12",
						orderAction: '待支付'
					},
					{
						orderDetail: 23724834,
						orderTime: "2022-12-12",
						orderAction: '备货中'
					},
					{
						orderDetail: 23724834,
						orderTime: "2022-12-12",
						orderAction: '备货中'
					},
					{
						orderDetail: 23724834,
						orderTime: "2022-12-12",
						orderAction: '备货中'
					},
					{
						orderDetail: 23724834,
						orderTime: "2022-12-12",
						orderAction: '备货中'
					},
					{
						orderDetail: 23724834,
						orderTime: "2022-12-12",
						orderAction: '备货中'
					},
					{
						orderDetail: 23724834,
						orderTime: "2022-12-12",
						orderAction: '备货中'
					},
					{
						orderDetail: 23724834,
						orderTime: "2022-12-12",
						orderAction: '备货中'
					},
					{
						orderDetail: 23724834,
						orderTime: "2022-12-12",
						orderAction: '备货中'
					},
					{
						orderDetail: 23724834,
						orderTime: "2022-12-12",
						orderAction: '备货中'
					},
					{
						orderDetail: 23724834,
						orderTime: "2022-12-12",
						orderAction: '备货中'
					},
				]
			}
		},
		components: {
			headTop,
		},
		methods: {
			kucun() {
				uni.navigateTo({
					url: '/pages/kucun/kucun/kucun'
				})
			}
		},
		onLoad(option) {
			this.isorder = option.isorder
			let sys = uni.getSystemInfoSync()
			this.wh = sys.windowHeight - 220

		},
	}
</script>

<style lang="scss" scoped>
	.orderAction {
		display: flex;
		justify-content: space-around;
		align-items: center;

		button {
			&:nth-child(2) {
				flex-grow: 1;
			}
		}
	}

	.goodsInfo {
		width: 100%;
		height: 160rpx;

		padding-left: 10rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-start;
		border: 1rpx solid black;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
		transition: 0.3s;
		border-radius: 4rpx;

		.detailTime {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			span {
				padding: 0 20rpx;
			}
		}
	}

	.contain-ten {
		position: fixed;
		bottom: 0;
		height: 220rpx;
		line-height: 220rpx;
		display: flex;

		width: 100%;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-start;

		.createdOrder {
			margin-right: 0;
			margin-bottom: 40rpx;


		}

	}

	.catives {
		background-color: #fff;
	}
</style>